<template>
	<view>
		<view v-if="display" class="canvas">
			<canvas canvas-id="testCanvas" :style="{ width: w + 'px', height: h + 'rpx' }"></canvas>
			<view v-if="isBtn" class="savePhoto bgfff " @tap="clickMe" :style="{ width: w + 'px' }">保存到相册</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		display: {
			type: String,
			default: 'none'
		},
		screenImg: {
			type: String,
			default: '/static/logo.png'
		},
		imgScan: {
			type: String,
			default: '/static/logo.png'
		},
		imgScanW: {
			type: Number,
			default: 140
		},
		imgType: {
			type: String,
			default: 'png' //仅支持png/jpg
		},
		title: {
			type: String,
			default: '源未文化'
		},
		author: {
			type: String,
			default: '源未'
		},
		padding: {
			type: Number,
			default: 65
		},
		bottomH: {
			type: Number,
			default: 900
		}
	},
	data() {
		return {
			srcImg: '',
			w: '',
			h: '',
			isBtn: false
		};
	},
	watch: {
		display(newValue, oldValue) {
			console.log('display', this.display);
			// this.drawImage();
		}
	},
	methods: {
		clickMe() {
			let _this = this;
			uni.showLoading({
				title: '正在保存中'
			});
			uni.canvasToTempFilePath({
				canvasId: 'testCanvas',
				fileType: _this.imgType,
				success: function(res) {
					uni.hideLoading();
					_this.srcImg = res.tempFilePath;
					console.log(res);
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(res1) {
							console.log('res', res);
							_this.$emit('clickMe', true, res.tempFilePath);
							uni.showToast({
								title: '保存成功'
							});
						},
						fail(err) {
							_this.$emit('clickMe', false, res.tempFilePath);
							uni.showToast({
								icon: 'none',
								title: '保存失败'
							});
							uni.hideLoading();
						},
						complete() {
							_this.isBtn = false;
						}
					});
				},
				fail(err) {
					uni.hideLoading();
					console.log(err);
				}
			});
		},
		async drawImage() {
			let _this = this;
			let imgInfo =  await _this.getImageInfo({ imgSrc: _this.screenImg });
			let r = [imgInfo.width, imgInfo.height];
			let path = imgInfo.path;

			//canvas宽度和高度
			let canvasW = _this.padding + _this.padding, //计算canvas宽 左右空白
				canvasH = _this.padding + _this.padding + _this.padding + _this.padding + _this.bottomH; //计算canvas高 上中下空白区域 + 下部分文本区域

			let rect_w_padding = _this.padding,
				rect_h_padding = _this.padding; //矩形横向，纵向边距

			if (r[0] < 370) {
				rect_w_padding = rect_w_padding + Math.floor((370 - r[0]) / 2); // 横向需要补的留白区域  有空白区域时，绘制图片的左侧间距需要重新计算
				canvasW = canvasW + 370;
			} else if (r[0] > 500) {
				// 大于500px的图片等比例缩放
				r[1] = 370 / (r[0] / r[1]);
				r[0] = 370;
				canvasW = canvasW + 370;
			} else {
				canvasW = canvasW + r[0];
			}
			if (r[1] < 410) {
				rect_h_padding = rect_h_padding + Math.floor((410 - r[1]) / 2);
				canvasH = canvasH + 410;
			} else if (r[1] > 600) {
				r[0] = 600 * (r[0] / r[1]);
				r[1] = 600;
				rect_w_padding = _this.padding + Math.floor((370 - r[0]) / 2); // 横向需要补的留白区域  有空白区域时，绘制图片的左侧间距需要重新计算
				canvasH = canvasH + 800;
			} else {
				canvasH = canvasH + r[1];
			}

			let textPadding = rect_w_padding;
			let bottomPositionY = rect_h_padding + r[1] + _this.padding; //下半部分距离图片高度
			let scanPositionX = r[0] + rect_w_padding - _this.imgScanW; //计算二维码距离左侧位置
			if (r[1] === 600) {
				textPadding = textPadding - _this.padding;
				scanPositionX = scanPositionX + _this.padding;
			}

			const ctx = uni.createCanvasContext('testCanvas');

			_this.w = uni.upx2px(canvasW);
			_this.h = uni.upx2px(canvasH);

			//绘制白色矩形背景
			ctx.setFillStyle('white');
			ctx.fillRect(0, 0, _this.w, _this.h);
			//绘制第一张图片
			ctx.drawImage(path, uni.upx2px(rect_w_padding), uni.upx2px(rect_h_padding), uni.upx2px(r[0]), uni.upx2px(r[1]));

			// 绘制下半部分
			//设置图片描述/图片标题
			ctx.setFontSize(uni.upx2px(32));
			ctx.setFillStyle('#31303B');
			ctx.fillText(_this.title, uni.upx2px(textPadding), uni.upx2px(bottomPositionY + 32)); //32为字体大小
			//绘制作者名称
			ctx.setFontSize(uni.upx2px(28));
			ctx.setFillStyle('#A6A6A6');
			ctx.fillText('作者 | ' + _this.author, uni.upx2px(textPadding), uni.upx2px(bottomPositionY + 28 + 100));
			ctx.drawImage(_this.imgScan, uni.upx2px(scanPositionX), uni.upx2px(bottomPositionY), uni.upx2px(_this.imgScanW), uni.upx2px(_this.imgScanW));

			setTimeout(function() {
				ctx.draw();
				_this.isBtn = true;
				uni.hideLoading();
			}, 2000);
		},
		async getImageInfo({ imgSrc }) {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: imgSrc,
					success: function(image) {
						console.log(image);
						resolve(image);
					},
					fail(err) {
						reject(err);
					}
				});
			});
		}
	},
	mounted() {
		uni.showLoading({
			title: '正在努力生成中'
		});
		console.log(this.screenImg);
		this.drawImage();
	}
};
</script>

<style lang="less" scoped="">
.canvas {
	.savePhoto {
		margin-top: 20px;
		height: 90px;
		line-height: 90px;
		
		font-weight: bold;
		font-size: 36px;
		border-radius: 20px;
	}
}
</style>
